<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">关联FBA号和跟踪号</span>
        </el-col>
      </div>
      <el-col :span="7">
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>九方子单号:</span>
          </el-col>
          <el-col :span="16">
            <el-input size="mini" :rows="10" v-model="subWaybillNo" ref="ref_1" :readonly="substatus ? false : 'readonly'"
                      @keyup.enter.native="showFbaTrackNo" placeholder="支持九方子单号/运单号混合查找"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>FBA箱号:</span>
          </el-col>
          <el-col :span="16">
            <el-input size="mini" :rows="10" v-model="fbaNo" ref="ref_2"
                      @keyup.enter.native="showFbaTrackNo"  placeholder="请录入FBA箱号"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>跟踪号:</span>
          </el-col>
          <el-col :span="16">
            <el-input size="mini" :rows="10" v-model="trackNo" ref="ref_3"
                      @keyup.enter.native="showFbaTrackNo" placeholder="请录入跟踪号"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;margin-bottom: 10px;margin-left: 16%">
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="showFbaTrackNo">
              确定
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="withdraw">
              撤回
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3">
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col :span="8" style="width: 80px;height: 80px;line-height: 80px;border-radius: 40px;
                      border: 1px solid #ff7575;color: #ff7575;text-align: center;font-size: 26px;">
            <span  >{{hasCount}}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col :span="4">
            <span>应扫描数:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{count}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col :span="4">
            <span>剩余数:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{remainCount}}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row style="margin-top: 10px;">
          <el-col :span="4">
            <span>运单号:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{waybillNo}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>渠道名称:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{customerChannelName}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>目的国家:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{countryName}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>客户简称:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{customerNameShort}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>客户代码:</span>
          </el-col>
          <el-col :span="16">
            <span  >{{customerCode}}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="1">
        <el-row style="margin-top: 10px;">
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="saveAssociatFbaTrackNum" style="margin-left: 19%;margin-top: 134px;">
              保存
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table  :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号" >
        </el-table-column>
        <el-table-column prop="hsubNumber" label="已扫FBA号" >
        </el-table-column>
        <el-table-column prop="htrackNo" label="已扫跟踪号" >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";
  import { Toast } from "mint-ui";

  export default {
    components: {},
    props: [],
    data() {
      return {
        subWaybills:[{
          subWaybillNo: '',
          hsubNumber: '',
          htrackNo: '',
        },],
        subwaybill: {
          subWaybillNo: '',
          hsubNumber: '',
          htrackNo: '',
        },
        substatus: true,
        disable1: true,
        waybillNos: '',
        subWaybillNo: '',
        fbaNo: '',
        trackNo: '',
        remainCount: '',
        orderCount: '',
        waybillNo: '',
        customerChannelName: '',
        countryName: '',
        customerNameShort: '',
        customerCode: '',
        cursubNo: 1,
        count: 0,
        waybillId: '',
        hasCount: 0,
        fbaNoMap: {},
        trackNoMap: {},
        subWaybillList: [],
        flag: 0
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.initDat();
    },
    methods: {
      initDat(){
        this.subWaybills = [];
        this.$refs.ref_1.focus();
      },
      showFbaTrackNo(){
        if(this.count!=0&&this.cursubNo > this.count) {
          this.$message.error('子单号已经全部扫描完毕！');
        }
        if(!this.isNotNull(this.waybillId)) {
          if(this.isNotNull(this.subWaybillNo)&&this.disable1) {
            this.disable1 = false;
            this.searchSubWaybill(this.subWaybillNo);
          } else {
            this.$message.error('请输入九方子单号或运单号查找！');
            this.disable1 = true;
          }
        } else {
          if(!this.isNotNull(this.fbaNo) && !this.isNotNull(this.trackNo)) {
            this.$message.error('请录入FBA箱号或跟踪号！');
          }else if(this.isNotNull(this.fbaNo) && !this.isNotNull(this.trackNo)) {
            this.showFbaNo(this.fbaNo);
          }else if(!this.isNotNull(this.fbaNo) && this.isNotNull(this.trackNo)) {
            this.showTrackNo(this.trackNo);
          }else if (this.isNotNull(this.fbaNo) && this.isNotNull(this.trackNo)) {
            this.showFbaNo(this.fbaNo);
          }
        }
      },
      //显示跟踪号

      showTrackNo(noVal) {
        if(0 == noVal.length) {
          this.$message.error('请输录入跟踪号！');
          this.$refs.ref_3.focus();
          return false;
        }
        var flag = false;
        for (var subWaybill in this.subWaybillList) {
          console.log(this.subWaybillList[subWaybill]);
          if (noVal === this.subWaybillList[subWaybill].trackNumber) {
            flag = true;
          }
        }
        /**
        if (!flag) {
          this.$message.error('追踪号不属于当前运单！');
          this.$refs.ref_3.focus();
          return false;
        }**/
        var has = this.cursubNo in this.trackNoMap;
        if(!has){
          this.trackNoMap[this.cursubNo] = noVal;
        }
        this.remainCount = --this.remainCount// 剩余件数
        this.hasCount = ++this.hasCount// 已经扫描件数
        if(this.cursubNo > this.count){
          this.$message.success('子单号已经全部扫描完毕！');
          this.fbaNo = "";
          this.trackNo = "";
        }
        this.subwaybill.htrackNo = noVal;
        this.subWaybills.splice(this.cursubNo-1,1,this.subwaybill);
        this.flag = this.cursubNo-1;
        this.cursubNo ++;
        this.$refs.ref_2.focus();
        this.trackNo = "";
        this.subwaybill ={};
      },
      //显示FBA号
      showFbaNo(noVal) {
        if(0 == noVal.length) {
          Toast('请输录入跟踪号！');
          this.$refs.ref_2.focus();
          return false;
        }
        var has = this.cursubNo in this.fbaNoMap;
        if(!has){
          this.fbaNoMap[this.cursubNo] = noVal;
        }
        this.subwaybill.subWaybillNo = this.subWaybills[this.cursubNo-1].subWaybillNo;
        this.subwaybill.hsubNumber = noVal;
        this.subWaybills.splice(this.cursubNo-1,1,this.subwaybill);
        this.flag = this.cursubNo-1;
        this.fbaNo = "";
        this.$refs.ref_3.focus();
      },
      searchSubWaybill: function (subNoVal) {
        if (0 == subNoVal.length) {
          this.$message.error('请输入九方子单号或运单号查找！');
          this.disable1 = true;
          return false;
        }
        ajax("searchSubWaybill", {"subNoVal": subNoVal}).then(
          res => {
            if (res.code == 200) {
              var data = res.data;
              if (data.error) {
                this.$message.error(data.error);
              } else {
                this.subWaybillList = data.subWaybills;
                this.count = data.count;
                this.remainCount = data.count;
                this.waybillId = data.waybillId;
                this.hasCount = 0;
                this.remainCount = data.count;

                this.waybillNo = data.waybillNo;// 运单号
                this.customerChannelName = data.customerChannelName;// 渠道名称
                this.countryName = data.countryName;// 国家
                this.customerNameShort = data.customerNameShort;// 客户简称
                this.customerCode = data.customerCode;// 客户代码
                var datas = data.subWaybills;
                for (var i in datas) {
                  datas[i].subWaybillNo = this.waybillNo +"_"+datas[i].subWaybillNo
                }
                this.subWaybills = datas;
                this.$refs.ref_2.focus();
                this.substatus = false;
              }
            } else {
              this.disable1 = true;
              this.subWaybillNo = "";
              if(res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("异常");
              }
            }
          },
          error => {
            this.disable1 = true;
            console.log(error);
          }
        );
      },
      withdraw(){
        if(this.subWaybills[this.flag].hsubNumber) {
          if (this.subWaybills[this.flag].htrackNo) {
            if (this.hasCount > 0) {
              this.hasCount = --this.hasCount;// 已经扫描件数
            }
            if (this.remainCount < this.count) {
              this.remainCount = ++this.remainCount;// 剩余件数
            }
            // this.hasCount--;
            if (this.cursubNo > 1) {
              --this.cursubNo;
            }
          }
          this.$delete(this.subWaybills[this.flag], "hsubNumber");
          this.$delete(this.subWaybills[this.flag], "htrackNo");
          //this.$set(this.subWaybills[this.flag], 'hsubNumber', '');
          //this.$set(this.subWaybills[this.flag], 'htrackNo', '');
          this.$refs.ref_2.focus();
        }
      },
      saveAssociatFbaTrackNum(){
        if(!this.waybillId) {
          this.$message.error('请先录入数据');
          this.$refs.ref_1.focus();
          return false;
        }
        if(this.count != this.hasCount){
          this.$message.error('已扫件数不等于应扫描件数');
          this.$refs.ref_1.focus();
          return false;
        }
        this.trackNoMap["waybillId"] = this.waybillId;
        var fbaNoStr = JSON.stringify(this.fbaNoMap);
        var trackNoStr = JSON.stringify(this.trackNoMap);
        ajax("saveAssociatFbaTrackNum", {"fbaNoStr": fbaNoStr, "trackNoStr": trackNoStr}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('保存成功');
              this.timeout = setTimeout(() => {
                window.location.reload(true);
              }, 1000 * Math.random());
            }else{
              if (res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("异常");
              }
            }
          },
          error => {
            this.$message.error(res.message)
          }
        );
      },
      isNotNull(objStr) {
        if (objStr == "" || objStr == null || objStr == "null" || objStr == "undefined" || typeof (objStr) == "undefined") {
          return false;
        }
        if (objStr == undefined || typeof (objStr) == undefined) {
          return false;
        }
        if (typeof (objStr) == "object" && objStr.length < 1) {
          return false;
        }
        return true;
      }
    },
  };


</script>
<style>
</style>
